<?php
/* 图表需要4个变量
 * $chartTitle ： 标题
 * $Y_axis ： Y轴标题
 * $X_axis ：X轴标题
 * $chartData ： 图表数据
 */

$todayBegin = strtotime(date('Y-m-d', time()) . ' 00:00:00');
?>
<link rel="stylesheet" type="text/css"
      href="<?php echo Yii::app()->request->baseUrl; ?>/css/bootstrap-datetimepicker.min.css" />
<script  type="text/javascript"
         src="<?php echo Yii::app()->request->baseUrl; ?>/js/bootstrap-datetimepicker.min.js"/>
<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#beginTime').datetimepicker({
                language: 'pt-BR'
            });
            $('#endTime').datetimepicker({
                language: 'pt-BR'
            });
        });
        $("#activity_checkAll").click(function () {
            if ($(this).attr("checked") == "checked") {
                $(":checkbox").attr("checked", true);
            } else {
                $(":checkbox").attr("checked", false);
            }
        });
    });
</script> 
<style>
    .condition{
        margin-right: 5px;
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 700;

    }
    .myHighlight{
        height: 100px;
        padding: 9px 14px;
        margin-bottom: 14px;
        background-color: #f7f7f9;
        border: 1px solid #e1e1e8;
        border-radius: 4px;
    }
    .screen{
        font-size: 12px;
        font-weight: 700;
        color: #959595;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .myInput{
        margin-bottom: 3px;
        display: block;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .myFind{
        float: right;
        margin-right: 10px;
    }
</style>
    <div class="myHighlight">
        <p class="screen">筛选条件</p>
        <div>
            <form class="form-inline">
                <div class="form-group" style="display: block;margin-bottom: 3px;">
                    <label for="time" class="condition">时间</label>
                    <div id="beginTime" class="input-append">
                        <input type="text" class="form-control myInput" data-format="yyyy-MM-dd"  placeholder="起始时间...">
                        <span class="add-on">
                            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                            </i>
                        </span></div>   --
                    <div id="endTime" class="input-append">
                        <input type="text" class="form-control myInput"  data-format="yyyy-MM-dd"  placeholder="结束时间...">                        
                        <span class="add-on">
                            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                            </i>
                        </span></div>   
                </div>
<!--                <div class="form-group" style="float: left;margin-bottom: 3px;">
                    <label for="payAmount" class="condition">金额</label>
                    <input type="text" class="form-control myInput"  style="width: 234px;" placeholder="最小总金额...">   --   <input type="text" class="fmyInputorm-control myInput" style="width: 234px;" placeholder="最多总金额...">
                </div>-->
                <!--<button type="submit" class="btn btn-success myFind">查找</button>-->
            </form>
        </div>
    </div>
    <div>
        <script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl . '/js/mobile/Chart.min.js' ?>"></script>
        <p><?php echo $analyseTotalData['chartTitle']; ?></p>
        <p style="margin-top: 60px;float: left;width: 20px;"><?php echo $analyseTotalData['Y_axis']; ?></p>
        <canvas id="chart-line" width="300" height="200"></canvas>
        <p style="margin-left: 150px;"><?php echo $analyseTotalData['X_axis']; ?> </p>;
        <script>
    var data = {
    labels: [<?php
        foreach ($analyseTotalData['chartData'] as $key => $value) {
            if ($key == 0) {
                ?>
            "<?php echo date('m-d', $todayBegin); ?>"<?php } else {
                ?>
            "<?php echo date('m-d', $todayBegin - 60 * 60 * 24 * $key); ?>",<?php
            }
        }
        ?>],
            datasets: [
            {
            label: "My Second dataset",
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: [<?php
        foreach ($analyseTotalData['chartData'] as $key => $value) {
            if ($key == 0) {
                echo $value;
            } else {
                echo $value . ',';
            }
        }
        ?>]
            }
            ]
    };
    function addChart() {

        var ctx1 = document.getElementById("chart-line").getContext("2d");
        var myLineChart = new Chart(ctx1).Line(data, {
            segmentShowStroke: true
        });
    }
    ;
    addChart();
        </script>

    </div>
    <!--    <div class="pagination">  
            <ul>  
                <li class="active">
                    <a href="javascript:void()">前一页</a>    </li>  
                <li class="active">
                    <a href="javascript:void()">1</a>    </li>  
                <li class="active">
                    <a href="javascript:void()">后一页</a>    </li>  
            </ul>  
        </div>-->
